<template>
  <div class="fix tr_body">
    <div class="tr-content fl">
      <div class="tr-title">
        费用目录<span class="add-title" @click="addTop">添加</span>
      </div>
      <div class="line"></div>
      <div class="tr-tree-list">
        <tree ref="tree" type="setting"
              @onCurrentChange="onCurrentChange"
              @addItem="addItem"
              @deleteItem="deleteItem"
              @updateItem="updateItem"></tree>
      </div>
    </div>

    <div class="fl cost-all-list" style="max-width: 900px;">
      <div class="cost-head fix">
        <div class="fl head-nav"><span>一级菜单</span> > <span>二级菜单</span></div>
        <div class="fr head-append"><span>添加</span></div>
      </div>
      <Table ref="selection" :columns="feeColumns" :data="feeData" class="mode-a"></Table>
    </div>

    <Modal
      v-model="showCategory"
      :title="curCategoryMode == 'add'?'新增费用目录':'修改费用目录'"
      @on-ok="sureFeeType">
      <Input v-model="curCategory.name" placeholder="请输入名称" style="width: 100%" :autofocus="true"/>
    </Modal>
  </div>
</template>
<script>
  import {Tree} from 'wxm-pc';
  import expense from '@/data/expense.js';

  export default {
    components: {Tree},
    data() {
      return {
        showCategory: false,
        curCategoryMode: null,
        curCategory: {},
        feeColumns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            icon: '',
            title: '费用类型名称',
            key: 'name',
            width: 110,
          },
          {
            title: '说明',
            key: 'desrc',
            width: 160,
            ellipsis: true
          },
          {
            title: '预算科目',
            key: 'budgetType',
            width: 120
          },
          {
            title: '状态',
            key: 'state',
            width: 120
          },
          {
            title: '操作',
            key: 'operate',
            width: 180,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    /*type: 'primary',*/
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                }, '设置'),
                h('Button', {
                  props: {
                    /*type: 'error',*/
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.index)
                    }
                  }
                }, '删除')
              ]);
            }
          }
        ],
        feeData: [
          {
            name: '机票',
            desrc: '北京到上海v北京到上海v',
            budgetType: '我那个消磨王小',
            state: 1223344,
            title: 'aaaaaaaa'
          },
          {
            name: '火车',
            desrc: '北京到上海',
            budgetType: '差旅',
            state: ''
          },
          {
            name: '火车',
            desrc: '北京到上海',
            budgetType: '差旅',
            state: ''
          },
          {
            name: '火车',
            desrc: '北京到上海',
            budgetType: '差旅',
            state: ''
          }
        ]
      }
    },
    mounted() {
      this.loadFeeTypeData();
    },
    methods: {
      loadFeeTypeData() {
        expense.getFeeType().then((data) => {
          if (data.code == '0') {
            this.$refs.tree.setData(data.data);
          } else {
            this.$Message.error('服务异常');
          }
        });
      },
      addTop() {//添加顶级费用类型
        var seq = this.$refs.tree.getChildrenMaxSeq();
        this.curCategoryMode = 'add';
        this.curCategory = {seq};
        this.showCategory = true;
      },
      addItem(item){
        this.curCategoryMode = 'add';
        this.curCategory = item;
        this.showCategory = true;
      },
      updateItem(item){
        this.curCategoryMode = 'update';
        this.curCategory = item;
        this.showCategory = true;
      },
      deleteItem(item) {//删除费用类型
        this.$Modal.confirm({
          title: '提示',
          content: `确认删除【${item.name}】`,
          onOk: () => {
            expense.deleteCategory(item.id).then(rs => {
                if(rs.code == '0'){
                  this.$refs.tree.deleteItem(item);
                  this.$Message.info('删除成功');
                }else{
                  this.$Message.error('删除失败');
                }
            });
          }
        });
      },
      sureFeeType(){
        var category = this.curCategory;
        var name = category.name;
        if (!name) {
          this.$Message.error('请输入目录名称');
          return;
        }
        if (name.length > 20) {
          this.$Message.error('目录名称长度不能超过20');
          return;
        }
        if (this.curCategoryMode == 'add') {//新增类型
          var addData = {
            name: category.name,
            pid: category.pid,
            flagDir: 1,
            seq: category.seq || 0
          };
          expense.addCategory(addData).then(rs => {
            if (rs.code == '0') {
              addData.id = rs.data.id;
              this.$Message.info('新增目录成功');
              this.$refs.tree.addItem(addData);
            } else {
              this.$Message.error(rs.message || '新增失败');
            }
          });
        } else if (this.curCategoryMode == 'update') {//更新类型
          var updateData = {
            id: category.id,
            name: category.name
          };
          expense.updateCategory(updateData).then(rs => {
            if (rs.code == '0') {
              this.$Message.info('修改成功');
              this.$refs.tree.updateItem(updateData);
            } else {
              this.$Message.info('修改失败');
            }
          });
        }
      },//保存费用类型
      onCurrentChange(curItem) {
        console.log(curItem)
      },
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .ell {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  fl {
    float: left;
  }

  fr {
    float: right;
  }

  .fix:after {
    display: table;
    content: '';
    clear: both;
  }

  .iconfont {
    cursor: pointer;
  }

  .tr_body {
    padding: 20px;
    background-color: #f4f4f4;
  }

  .tr-content {
    overflow: auto;
    width: 300px;
    background-color: #FFFFFF;
    position: relative;
    margin-right: 20px;
    padding-bottom: 10px;
    .line {
      width: 280px;
      margin: auto;
      border-bottom: 1px #e7e5e2 dashed;
    }
  }

  .tr-title {
    width: 280px;
    height: 56px;
    line-height: 56px;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    margin: auto;
    span.add-title {
      float: right;
      margin: 18px 0 0;
      height: 26px;
      line-height: 26px;
      width: 70px;
      border-radius: 14px;
      border: 1px #0078C9 solid;
      text-align: center;
      color: #0078C9;
      font-size: 12px;
      cursor: pointer;
    }
  }

  .tr-tree-list {
    padding: 0 10px;
  }

  .cost-all-list {
    //width: calc(100% - 390px);
    background-color: #FFFFFF;
  }

  .cost-head {
    height: 56px;
    line-height: 56px;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    margin: 0 20px;
    border-bottom: 1px #e7e5e2 dashed;
    .head-nav {
      float: left;
      font-size: 14px;
      width: 150px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      span:hover {
        color: #0078C9;
        cursor: pointer;
      }
    }
    .head-append {
      float: right;
      margin: 18px 0 0;
      height: 26px;
      line-height: 26px;
      width: 70px;
      border-radius: 14px;
      border: 1px #0078C9 solid;
      text-align: center;
      color: #0078C9;
      font-size: 12px;
      cursor: pointer;
    }
  }
</style>
